<template>
    <div class="btn-container">
        <RouterLink replace v-for="option in bntOptions" :key="option.text" :to="`/main/${option.to}`">
            <Button hovering-border shape="hexagon" size="min(42px,5vw)" bg-color="red" font-family="">{{ option.text
                }}</Button>
        </RouterLink>
    </div>
    <bgImg url="/src/assets/img/bg/01.webp"></bgImg>
    <slideBox class="art-words" slide="right-slide" @click="showTitleNextWords">
        <img src="@/assets/img/art-words/game-name-red.webp"></img>
    </slideBox>
    <slideBox class="art-words next-words" slide="right-slide" v-if="count >= 9">
        <img src="@/assets/img/art-words/game-name-reflect.webp"></img>
    </slideBox>
    <RouterView></RouterView>
</template>

<script lang="ts" setup>
import bgImg from '@/components/ui/bg-img.vue';
import slideBox from '@/components/ui/slide-box.vue';
import Button from '@/components/ui/button.vue';
import { ref } from 'vue';
import { RouterLink } from 'vue-router';
const bntOptions: ({ text: string, to: string })[] = [
    {
        text: "开始游戏",
        to: "mode_choose"
    },
    {
        text: "继续游戏",
        to: "read_record"
    },
    {
        text: "游戏设置",
        to: "setting"
    },
    {
        text: "游戏说明",
        to: "instruction/rule"
    }
];
const count = ref(0);
function showTitleNextWords() {
    if (count.value < 9) count.value++;
}
</script>

<style scoped>
.btn-container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: absolute;
    width: 100vw;
    top: 80vh;
    animation: lift 1s forwards cubic-bezier(0.45, -0.14, 0.65, 1.6), fade-in 1s forwards;
}

.art-words {
    position: absolute;
}

.art-words>img {
    max-width: 80vw;
    max-height: 50vh;
}

.next-words {
    transform: translate(calc(100vw - 100%), 100%);
    pointer-events: none;
}
</style>